<template>
  <div class="vc-page">
    <!-- 查询条件 -->
    <query-terms ref="queryTerms" :searchConfig="searchConfig"/>

    <!-- 操作按钮 -->
    <el-row class="vc-btns">
      <el-button type="primary" size="small" @click="addDialogVisible = true">新增</el-button>
      <el-button size="small" :disabled="selectedIds.length === 0" @click="batchDel">删除</el-button>
    </el-row>

    <!-- 列表展示 -->
    <div class="vc-table">
      <tables
        v-model="tableConfig.tableData"
        :columns="tableConfig.columns"
        :stripe="true"
        @on-selection-change="handleSelectionChange"/>

      <el-pagination
        :current-page="currentPage"
        @current-change="handleCurrentChange"
        :page-size="GLOBAL.QUERY.PAGE_SIZE"
        :total="total"
        layout="total, prev, pager, next">
      </el-pagination>
    </div>

    <!-- 新增 -->
    <add-config :dialogVisible="addDialogVisible" @close="closeAddDialog"></add-config>

    <!-- 修改 -->
    <edit-config :entity="entity" :dialogVisible="editDialogVisible" @close="closeEditDialog"></edit-config>
    
  </div>
</template>

<script>
import AddConfig from './add';
import EditConfig from './edit';

export default {
  name: 'config',
  components: { AddConfig, EditConfig },
  data() {
    return {
      // 查询条件
      searchConfig: {
        items: [
          {
            key: 'name',
            title: '名称'
          },
          {
            key: 'code',
            title: '编码'
          },
          {
            key: 'val',
            title: '值'
          },
          {
            key: 'descr',
            title: '描述'
          }
        ],
        search: params => {
          this.search(params);
        },
        reset: () => {
          this.reset();
        },
        params: {}
      },
      searchData: {
        name: '',
        code: '',
        val: '',
        descr: ''
      },
      // 列表
      tableConfig: {
        columns: [
          {
            type: 'selection'
          },
          {
            type: 'index'
          },
          {
            title: '名称',
            key: 'name'
          },
          {
            title: '编码',
            key: 'code'
          },
          {
            title: '值',
            key: 'val'
          },
          {
            title: '描述',
            key: 'descr'
          },
          {
            type: 'option',
            minWidth: '48',
            items: [
              {
                title: '修改',
                class: 'edit',
                click: row => {
                  this.handleEdit(row)
                }
              }
            ]
          }
        ],
        tableData: []
      },
      currentPage: 1,
      total: 0,
      selectedIds: [],
      entity: {},
      addDialogVisible: false,
      editDialogVisible: false
    };
  },
  created() {
    this.getConfigByPage();
  },
  methods: {
    /**
     * 加载列表数据
     */
    getConfigByPage(pageNum = this.currentPage, pageSize = this.GLOBAL.QUERY.PAGE_SIZE, entity = this.searchData) {
      this.$api.getConfigByPage({
        data: {
          pageNum: pageNum,
          pageSize: pageSize,
          params: entity
        }
      }).then(res => {
        if (!res.success || !res.data.total) {
          this.emptyTableData();
          return;
        }
        if (!res.data.records || !res.data.records.length) {
          this.currentPage--;
          this.getConfigByPage();
          return;
        }
        this.tableConfig.tableData = res.data.records;
        this.total = res.data.total;
        this.currentPage = res.data.current;
      }).catch(() => {
        this.emptyTableData();
      });
    },
    /**
     * 清空表格数据
     */
    emptyTableData() {
      this.tableConfig.tableData = [];
      this.total = 0;
      this.currentPage = 1;
    },
    /**
     * 点击页数
     */
    handleCurrentChange(val) {
      this.getConfigByPage(val);
    },
    /**
     * 查询
     */
    search(params) {
      this.searchData = this.GLOBAL.filter.filterSpace(params);
      this.currentPage = 1;
      this.getConfigByPage();
    },
    /**
     * 重置
     */
    reset() {
      this.search(this.GLOBAL.object.clearValOfObj(this.searchData));
    },
    /**
     * '新增'弹出框关闭事件
     */
    closeAddDialog(val) {
      this.addDialogVisible = false;
      val && this.$refs.queryTerms.reset();
    },
    /**
     * 复选框勾选
     */
    handleSelectionChange(val) {
      this.selectedIds = this.GLOBAL.array.selectOneKey(val, 'id');
    },
    /**
     * '删除'按钮点击事件
     */
    batchDel() {
      this.$confirmBox(this.handleDel);
    },
    /**
     * 删除
     */
    handleDel() {
      this.$api.deleteConfigByIds({
        data: this.selectedIds
      }).then(res => {
        this.getConfigByPage();
        res.success && this.$notifyBox('删除成功', 'success');
      });
    },
    /**
     * 操作列-修改
     */
    handleEdit(row) {
      this.entity = Object.assign({}, row);
      this.editDialogVisible = true;
    },
    /**
     * '修改'弹出框关闭事件
     */
    closeEditDialog(val) {
      this.editDialogVisible = false;
      val && this.getConfigByPage();
    }
  }
};
</script>